// ChildComponent.js
const {ref} = Vue;
const ChildComponent = {
    name: 'ChildComponent',
    template: `
   <div style="border: solid 1px dodgerblue; padding: 5px">
    <h2>子组件</h2>
    <p>接收到的字符串消息: {{ message }}</p>
    <p>接收到的数字值: {{ numberValue }}</p>
    <p>编辑框的值: {{ inputValue }}</p>
    <button @click="sendMessage('按钮 1 被点击')" style="margin-right: 6px">按钮 1</button>
    <button @click="sendMessage('按钮 2 被点击')">按钮 2</button>
  </div>
    `,
    props: {
        message: String,
        numberValue: Number,
        inputValue: String
    },
    // 自定义事件
    emits: ['buttonClicked'],
    setup(props, {emit}) {
        const sendMessage = (msg) => {
            emit('buttonClicked', msg);
        };
        return {sendMessage};
    }
};

